import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          colorScheme: const ColorScheme(
              primary: Colors.blueAccent, //按钮字体颜色
              surfaceVariant: Colors.orange,
              secondary: Colors.yellowAccent,
              background: Colors.white, //整个页面背景色
              error: Colors.red,
              brightness: Brightness.light,
              onBackground: Colors.blueAccent, //边框按钮边框颜色
              outlineVariant: Colors.amber,
              onError: Colors.yellow,
              onPrimary: Colors.redAccent,
              onSecondary: Colors.blueAccent,
              onSurface: Color.fromARGB(255, 54, 54, 184),
              surface: Colors.blue) //整个标题栏颜色
          // primarySwatch: Colors.blue, // 设置主色调,无效，怎么设都是白色
          ),
      home: Scaffold(
        appBar: AppBar(title: const Text("P31"), centerTitle: true),
        body: const LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  const LayoutDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(20),
      children: [
        Row(
          children: [
            Text(
              "热搜",
              style: Theme.of(context).textTheme.titleLarge,
            )
          ],
        ),
        const Divider(),
        Wrap(
          spacing: 10,
          runSpacing: 12,
          children: [
            Button("女装",
                onPressed: () {},
                bgColor: const Color.fromARGB(115, 245, 238, 238)),
            Button("笔记本",
                onPressed: () {},
                bgColor: const Color.fromARGB(115, 223, 51, 51)),
            Button("玩具", onPressed: () {}, bgColor: Colors.amber),
            Button("文学", onPressed: () {}, bgColor: Colors.lightBlue),
            Button("时尚",
                onPressed: () {},
                bgColor: const Color.fromARGB(115, 128, 86, 184)),
            Button("口红",
                onPressed: () {},
                bgColor: const Color.fromARGB(115, 161, 64, 129)),
            Button("包包",
                onPressed: () {},
                bgColor: const Color.fromARGB(115, 124, 212, 146)),
            Button("猫粮冻干",
                onPressed: () {},
                bgColor: const Color.fromARGB(115, 109, 202, 72)),
          ],
        ),
        const SizedBox(height: 10),
        Row(
          children: [
            Text("历史记录", style: Theme.of(context).textTheme.titleLarge)
          ],
        ),
        const Divider(),
        //ListView不能直接嵌套，换成Column
        const Column(
          children: [
            ListTile(title: Text("女装")),
            Divider(),
            ListTile(title: Text("包包")),
            Divider(),
            ListTile(title: Text("笔记本")),
          ],
        ),
        const SizedBox(height: 40),
        // Row(//不包裹外面这层，button自适应宽度
        //   children: [
        Padding(
            //加个padding上下左右给个距离
            padding: const EdgeInsets.all(40),
            child: OutlinedButton.icon(
              style: ButtonStyle(
                  foregroundColor: MaterialStateProperty.all(Colors.black45),
                  side: MaterialStateProperty.all(
                      const BorderSide(width: 1, color: Colors.black87))),
              onPressed: () {},
              icon: const Icon(Icons.delete),
              label: const Text("清空历史记录"),
            ))

        // ],
        // )
      ],
    );
  }
}

//自定义按钮组件
// ignore: must_be_immutable
class Button extends StatelessWidget {
  String text;
  var bgColor;
  void Function()? onPressed;

  Button(this.text,
      {super.key, required this.onPressed, required this.bgColor});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(bgColor),
          //  backgroundColor: bgColor,
          foregroundColor: MaterialStateProperty.all(Colors.black45)),
      onPressed: onPressed,
      child: Text(text),
    );
  }
}
